<template>
    <div class="login">
        <div class="login-div">
            <h1 style="color:white">在线教育网后台管理系统</h1>
            <el-input placeholder="用户名" v-model="list.username" prefix-icon="iconfont icon-user" autofocus></el-input>
            <el-input placeholder="密码" v-model="list.password" prefix-icon="iconfont icon-lock1" show-password></el-input>
            <el-button type="primary" @click="add()">登录</el-button>
            <span @click="tiao()" style="color:#f1f3f4">还没账号？点击注册</span>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            list: {
                username: '',
                password: ''
            }
        };
    },
    methods: {
        tiao(){
            this.$router.push('/register')
        },
        async add() {
            await this.$http({
                url: 'api/users/login',
                method: 'POST',
                data: {
                    email: this.list.username,
                    password: this.list.password,
                }
            }).catch(err=>{
                console.log(err)
                this.$message({
                        message:err.response.data.msg,
                        type:'error'
                    })
            })
            
            .then(res => {
                console.log(res)
                if (res.status == 200) {
                
                    this.$store.commit('add',this.list.username)
                    localStorage.setItem('token', res.data.token)
                    this.$router.push('/Home')
                    this.$message({
                        message:'登录成功',
                        type:'success'
                    })
                    // console.log(res)
                }
            })
        }
    },
};
</script>

<style lang="scss" scoped>
.login {
    background-color: #2d3a4b;
    width: 100vw;
    /**view width:可见区域宽度*/
    height: 100vh;

    /**view height:可见区域高度*/
    .login-div {
        width: 500px;
        height: 300px;
        // border: 1px solid red;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        h1 {
            margin-bottom: 30px;
        }

        ::v-deep input {
            color: white;
            background-color: #2d3a4b;
           
        }

        ::v-deep button {
            width: 100%;
            margin-top: 40px;
        }
    }
}
</style>